import Vue from "vue";
import VueRouter from "vue-router";
import loginView from "../views/login/loginView";
import LayoutView from "../views/Layout/LayoutView";
import SiteAction from "../views/site/action/SiteAction";
import DashboardView from "../views/DashboardView";
import NotDevelopedView from "../views/NotDevelopedView";
// import 和 require 的区别
// import 是ES6的语法
// require 是comment.js模块的语法
//区别：import 是静态的，js在对文件进行预解析时，就会引入import引入的模块，不管import引入模块语句写在哪个位置都会进行提升，而且import语句不能写在分支、循环语句里面
// ,因为import是静态的，require是动态的，他就是个函数，他可以写在任意的分支、循环里面
//webPack异步加载原理
// webPack里面就
// 这个 import() 函数，它就类似于require，它可以动态地加载某个模块，它返回的是一个Promise对象
// Vue里面有一个对应的概念，叫异步组件，这个组件我们平时可以不用，根据实际情况，让这个组件动态的加载

// 路由懒加载
// 目的：减少打包体积，提升打包速度
// 原理：利用webpack的异步加载，和vue的异步组件
//使用：把之前导入路由组件的方式由静态导入写成动态导入
//具体执行过程：把首页的组件的js代码打包到默认的app.js里面，把其他页面的js打包到另外的js文件中，当我们首屏加载的时候，就只加载app.js,这样就可以提升加载的速度
//当用户访问其他页面时，在请求对应的js文件，进行页面的渲染
// 异步组件：这个组件不是一开始就会加载，而是当我们使用它的时候才进行加载
// import CategoryView from "../views/product/category/CategoryView";
//动态导入  当没有进入category页面时 不会请求相应的js，只有当访问这个页面时才会
// 这个js是我们在打包的时候，在这里这样写了之后，他对这个路由进行了懒加载，他没有把这个路由的路由对应的组件的js代码直接打包进去，
// 而是把这个组建的js代码打包成一个单独的js文件 ，这个js文件不会直接加到首屏里面，而是当你真正要用到这个组件对应的js的时候，创建一个script标签请求这个文件进行加载
const CategoryView = () =>
  import(
    /*webpackChunkName:'product' */ "../views/product/category/CategoryView"
  );

// import ProductListView from "../views/product/list/ProductListView";
// import ProductEditView from "../views/product/edit/ProductEditView";

// 下面两个 文件有共同的webpackChunkName，webpack再进行打包时会把他们两个打包进一个js文件里面
const ProductListView = () =>
  import(
    /*webpackChunkName:'product' */ "../views/product/list/ProductListView"
  );
const ProductEditView = () =>
  import(
    /*webpackChunkName:'product' */ "../views/product/edit/ProductEditView"
  );

Vue.use(VueRouter);

const routes = [
  {
    path: "/login",
    name: "Login",
    component: loginView,
    meta: {
      title: "登录",
    },
  },
  {
    path: "/",
    name: "Menu",
    component: LayoutView,
    redirect: "/dashboard",
    children: [
      {
        path: "/dashboard",
        component: DashboardView,
      },
    ],
    meta: {
      title: "首页",
    },
  },
  {
    path: "/site",
    name: "Site",
    component: LayoutView,
    meta: { title: "网站设置" },
    children: [
      {
        path: "/site/action",
        name: "SiteAction",
        component: SiteAction,
        meta: { title: "操作记录" },
      },
      {
        path: "/site/aside",
        name: "SiteaSide",
        component: NotDevelopedView,
        meta: { title: "侧边栏设置" },
      },
    ],
  },
  {
    path: "/product",
    name: "Product",
    component: LayoutView,
    meta: {
      title: "商品管理",
    },
    children: [
      {
        path: "/product/category/",
        name: "ProductCategory",
        component: CategoryView,
        meta: {
          title: "商品类别",
        },
      },
      {
        path: "/product/list/",
        name: "ProductList",
        component: ProductListView,
        meta: {
          title: "商品列表",
          permission: {
            delete: [1, "超级管理员"],
          },
        },
      },
      {
        path: "/product/create/",
        name: "ProductCreate",
        component: ProductEditView,
        meta: {
          title: "创建商品",
        },
      },
    ],
  },
  {
    path: "/user",
    name: "User",
    component: LayoutView,
    meta: {
      title: "用户管理",
    },
    children: [
      {
        path: "/user/list",
        name: "userList",
        component: NotDevelopedView,
        meta: { title: "用户管理" },
      },
    ],
  },
  // 权限管理
  {
    path: "/permission",
    name: "Permission",
    component: LayoutView,
    meta: {
      title: "权限管理",
    },
    children: [
      {
        path: "/permission/roles",
        name: "PermissionRoles",
        component: NotDevelopedView,
        meta: { title: "角色管理" },
      },
      {
        path: "/permission/list",
        name: "PermissionList",
        component: NotDevelopedView,
        meta: { title: "权限列表" },
      },
    ],
  },
  {
    path: "/order",
    name: "Order",
    component: LayoutView,
    meta: { title: "订单管理" },
    children: [
      {
        path: "/order/list",
        name: "OrderList",
        component: NotDevelopedView,
        meta: {
          title: "订单列表",
        },
      },
    ],
  },
  {
    path: "/data",
    name: "Data",
    component: LayoutView,
    meta: { title: "数据统计" },
    children: [
      {
        path: "/data/user",
        name: "DataUser",
        component: NotDevelopedView,
        meta: { title: "用户数据" },
      },
      {
        path: "/data/order",
        name: "DataOrder",
        component: NotDevelopedView,
        meta: { title: "订单数据" },
      },
    ],
  },
];

const router = new VueRouter({
  routes,
});

export default router;
